<template>
  <div>
    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }"
          >首页</el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">控制台</el-breadcrumb-item> -->
        <el-breadcrumb-item>控制台</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计分析</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--  -->
    <div class="inner">
      <el-card shadow="hover" v-for="item in list" :key="item.name">
        {{ item.name }}
        <div>{{ item.num }}</div>
      </el-card>
    </div>
    <div style="margin-top:20px">
      <el-radio-group v-model="picType">
        <!-- v-bind绑定bool类型解析  不绑定false字符串转为bool为true -->
        <el-radio-button :label="true">折线图</el-radio-button>
        <el-radio-button :label="false">柱状图</el-radio-button>
      </el-radio-group>
      <template v-if="xdata.length>0">
        <saleCount
          :xdata="xdata"
          :ydata="ydata"
          id="saleCount1"
          style="height:400px;"
          v-if="picType"
        ></saleCount>
        <Bar
          :xdata="xdata"
          :ydata="ydata"
          id="saleCount2"
          style="height:400px"
          v-if="!picType"
        ></Bar>
      </template>
    </div>
    <div style="display:flex">
        <Pie id="pie" :data="sexCount" v-if="sexCount.length>0"></Pie>
        <Map ></Map>
    </div>
    
  </div>
</template>

<script>
import url from '../../config/url'
import saleCount from '../../components/saleCount.vue'
import Bar from '@/components/Bar.vue'
import Pie from '@/components/Pie.vue'
import Map from '@/components/Map.vue'
export default {
    components:{
        saleCount,
        Bar,
        Pie,
        Map
    },
  data() {
    return {
      list: [],
      xdata:[],
      ydata:[],
      picType:false,
      sexCount:[]
    }
  },
  created() {
    // 访问量  数量
    this.$http.get(url.counts).then((res) => {
      // console.log(res.data);
      this.list = res.data
    })
    // 一周的销售量
    this.$http.get(url.saleCount).then((res) => {
       res.data.forEach((item) => {
        this.xdata.push(item.name)
        this.ydata.push(item.num)
       })
    })
    // 性别人数统计
    this.$http.get(url.sexCount).then((res) => {
        res.data.forEach((item) => {
            // item.value *= 100
            this.sexCount.push(item)
        })
    })
  },
  
}
</script>

<style lang="scss" scoped>
.inner {
  background-color: #f5f5f5;
  margin-top: 20px;
  display: flex;
  padding: 10px;
  text-align: center;
  justify-content: space-between;
  > .el-card {
    width: 18%;
    background: linear-gradient(to right, #409eff, rgb(1, 210, 247));
    color: white;
  }
}
</style>